import React, { useMemo, useState } from "react";

function calcNumber(count) {
  console.log('重新计算');
  let total = 0
  for (let i = 1; i <= count; i++) {
    total += i
  }
  return total
}

export default function MemoHookDemo01() {
  const [count, setCount] = useState(10)
  const [show, setShow] = useState(true)

  const total = useMemo(() => {
    return calcNumber(count)
  }, [count])

  const total1 = () => {
    return calcNumber(count)
  }
  return (
    <div>
      <h2>计算数值的和: {total}</h2>
      <h2>计算数值的和: {total1()}</h2>
      <button onClick={(e) => setCount(count + 1)}>+1</button>
      <button onClick={(e) => setShow(!show)}>show切换</button>
    </div>
  )
}